<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js原生ajax发送get/post</title>
    <!--
        2.1、什么是 AJAX 请求
        ● ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发 技术。
        ● ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
        ● ajax 浏览器地址栏不会发生变化,局部更新不会舍弃原来页面的内容
    -->
    <script>
        // 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
        function ajaxRequest(method) {
            let url = "http://localhost:8080/lishuoboy_javaweb_war_exploded/AjaxServlet";
            let params = "name=硕";

            // 1、【必须】我们首先要创建 XMLHttpRequest
            var xmlHttpRequest;
            if (window.XMLHttpRequest) {
                xmlHttpRequest = new XMLHttpRequest(); //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            } else {
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 浏览器执行代码
            }
            // 2、【必须】调用 open 方法设置请求参数
            if ("GET" === method) {
                xmlHttpRequest.open(method, url + "?" + params, true);
            } else if ("POST" === method) {
                xmlHttpRequest.open(method, url, true);
                // 如果想要使用post提交数据,必须添加此行
                xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            }

            // 4、【非必需】在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
            xmlHttpRequest.onreadystatechange = function () {
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                    // 把响应的数据显示在页面上
                    document.getElementById("textarea1").innerHTML = JSON.stringify(jsonObj);
                    document.getElementById("textarea2").innerHTML = "编号：" + jsonObj.id + " , 信息：" + jsonObj.msg;
                }
            }
            // 3、【必须】调用 send 方法发送请求
            "GET" === method
                ? xmlHttpRequest.send()
                : xmlHttpRequest.send("name=硕");
        }
    </script>
</head>
<body>
<div>
    <button onclick="ajaxRequest('GET')">js的原生ajax get 请求</button>
    <button onclick="ajaxRequest('POST')">js的原生ajax post 请求</button>
</div>
<br>
<textarea id="textarea1" style="width: 200px;height: 100px;">textarea1</textarea>
<textarea id="textarea2" style="width: 200px;height: 100px;">textarea2</textarea>
</body>
</html>